<template>
  <div class="nav">
    <header class="nav-header">
      <!--   左侧头部   -->
      <div class="logo">
        <a>
          <img  src="https://rs.dance365.com/logo@3xrenew3.png"/>
        </a>
      </div>
      <nav class="nav-list">
          <a href="/home/recommend" class="nav-item active">资源</a>
          <a href="/discovery" class="nav-item active">课程</a>
          <a href="/trainingRoom" class="nav-item active">练习室</a>
          <a href="/communication" class="nav-item active">交流</a>
          <a href="/my" class="nav-item active">我的</a>
      </nav>
      <div class="right">
        <span>
            <el-icon-mobile/>
        </span>
        <button>发布</button>
        <span >
          <el-icon>
            <Avatar />
          </el-icon>
            登录
        </span>
        <span>
          退出登录
        </span>
      </div>
    </header>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "Nav",
});
</script>

<script setup lang="ts">

</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
  text-decoration: none;
}
.nav {
  width: 100%;
  height: 60px;
  background-color: #fff;
  box-shadow: 4px 0 9px #c1c1c1;
  z-index: 99;
}

.nav-header {
  position: relative;
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  display: flex;

}

.logo {
  width: 158px;
  margin-right: 30px;
  display: flex;
  align-items: center;
}

.logo img {
  width: 158px;
  height: 30px;
}

.nav-list {
  width: 458px;
  /* background: #bfa; */
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.right {
  position: absolute;
  right: 0;
  /* width: 210px; */
  height: 100%;
  /* background: #bff; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.right img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.right span {
  margin-left: 30px;
}

.right button {
  margin-left: 30px;
}

.right button {
  border-radius: 15px;
  width: 75px;
  height: 30px;
  color: #fff;
  background-color: #f93684;
  font-size: 16px;
  text-align: center;
  line-height: 29px;
  border: none;
}

.active {
  color: #f93864;
}
</style>
